<template>
  <div id="app" class="base-vue">
    <!-- 切换子应用和主应用菜单列表 -->
    <ul class="menu-parent-list">
      <li
        class="menu-item"
        :class="{ active: acitveClass(item.index) }"
        v-for="item in menu"
        :key="item.name"
        @click="checkMenu(item)"
      >
        <span class="iconfont" :class="item.icon"></span>
        <span>{{ item.name }}</span>
      </li>
    </ul>

    <!-- 主应用挂载此处-->
    <router-view></router-view>

    <!-- 子应用分别挂载盒子 -->
    <!-- <div id="vue-cli3"></div>
    <div id="app1"></div>
    <div id="app2"></div> -->
    <div id="micro-app"></div>
  </div>
</template>

<script>
// const appList = ["AAA", "app2", "vue-cli3"]; //微服务路由根目录
import {
  registerMicroApps,
  start,
  setDefaultMountApp, //设置主应用启动后默认进入的微应用。
  runAfterFirstMounted,
  loadMicroApp, //手动加载 适用于需要手动 加载/卸载 一个微应用的场景。
  initGlobalState, //定义全局状态，并返回通信方法,建议在主应用使用，微应用通过 props 获取通信方法。
} from "qiankun";

export default {
  name: "App",
  data() {
    return {
      mainMenu: [
        {
          index: "/",
          name: "主应用",
          icon: "el-icon-s-home",
          children: [],
        },
      ],
      microMenu: [
        {
          index: "/vue-cli3",
          name: "vue-cli3",
          icon: "el-icon-s-home",
          children: [],
        },
        {
          index: "/zh",
          name: "综合",
          icon: "el-icon-s-home",
          children: [],
        },
        {
          index: "/dl",
          name: "电力",
          icon: "el-icon-s-home",
          children: [],
        },
      ],
      menu: [],
    };
  },
  created() {
    this.menu = this.mainMenu.concat(this.microMenu);
  },
  mounted() {
    // 启动默认应用  貌似不能再主应用设置重定向
    console.log(111111111);
    // setDefaultMountApp("/app1");
  },
  methods: {
    // 点击父级菜单
    checkMenu(menuItem) {
      this.$router.push(menuItem.index).catch(() => {});
    },
  },
  computed: {
    acitveClass() {
      return (url) => {
        if (url.length > 1) {
          return this.$route.path.startsWith(url);
        } else {
          return !this.microMenu.some((v) =>
            this.$route.path.includes(v.index)
          );
        }
      };
    },
  },
};
</script>

<style lang="scss">
#app {
  height: 100vh;
  width: 100vw;
  .menu-parent-list {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 20000;
    width: 40px;
    overflow-x: hidden;
    transition: width 0.3s;
    white-space: nowrap;
    height: 100%;
    border-right: 1px solid #ccc;
    background: teal;
    padding-top: 4px;
    cursor: pointer;
    &:hover {
      width: 240px;
    }
    .menu-item {
      color: #fff;
      line-height: 40px;
      height: 40px;
      &:hover {
        background: #283143;
      }
      &.active {
        background: #283143;
      }
    }
    .iconfont {
      padding: 0 12px;
      display: inline-block;
      font-size: 14px;
    }
  }
}
.base-vue {
  padding-left: 40px;
}
#micro-app,
#micro-app > div {
  height: 100%;
}
</style>
